<template>
  <div class="cart">
    <header></header>
    <div class="cartcontent">
      <van-swipe-cell v-for="(item,key) in cart" :key="item.goodsId">
        <van-checkbox v-model="item.flag" @change="changesingle(key,item.flag)"></van-checkbox>
        <van-card
          :price="item.price"
          :desc="item.skuname | size"
          :title="item.title"
          :thumb="item.pic"
        >
          <template #num>
            <van-stepper v-model="item.number" />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    {{flag}}
    {{chan}}
    <footer>
      <van-submit-bar :price="count*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="flag" @change="change">全选</van-checkbox>
      </van-submit-bar>
    </footer>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations } from "vuex";
export default {
  data(){
    return{
      flag:false
    }
  },
  created(){
    this.flag=this.chan
  },
  computed: {
    ...mapState(["cart"]),
    ...mapGetters(['count','chan','noflag'])
  },
  filters: {
    size(val) {
      var start = val.indexOf(":") + 1;
      return val.substring(start, val.length - 1);
    },
  },
  methods:{
    ...mapMutations(['all','no','single']),
    change(){
      console.log('12')
      if(this.flag){
        //全选
        this.all()
      }else if(this.noflag==0){
        //不选
        this.no()
      }
    },
    changesingle(index,flag){
      var obj={index:index,flag:flag}
      this.single(obj)
      this.flag=this.chan;
    }
  }
};
</script>

<style lang="scss" scoped>
.cart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px;
    background: brown;
  }
  footer {
    width: 100%;
    height: 50px;
    background: brown;
    overflow: auto;
  }
  & > div {
    flex: 1;
  }
}
.delete-button {
  height: 100%;
}
.van-swipe-cell {
  padding-left: 30px !important;
  position: relative;
  .van-checkbox {
    position: absolute;
    left: -20px;
    top: 40%;
  }
}

.van-submit-bar{
  bottom:50px  !important;
}
</style>